import React, { useState, useEffect } from 'react';
import { Flex } from 'antd-mobile';
import { Table, Statistic, Icon } from 'antd';
import _ from 'lodash';
import * as utils from '../utils';

// 调整前后
const renderStatistic = (text, row) => {
  let value;
  let precision;
  const { valueEdition } = row;
  if (valueEdition.indexOf('金额') > -1) {
    value = `${text / 10000}`;
    precision = 0;
  } else if (
    valueEdition.indexOf('房源均价') > -1 ||
    valueEdition.indexOf('车位均价') > -1 ||
    valueEdition.indexOf('套数') > -1 ||
    valueEdition.indexOf('车位数') > -1
  ) {
    value = `${text}`;
    precision = 0;
  } else if (valueEdition.indexOf('面积') > -1) {
    value = `${text}`;
    precision = 2;
  }
  return (
    <div style={{ width: '100%', textAlign: 'right' }}>
      <Statistic value={(value * 1).toFixed(precision)} />
    </div>
  );
};

// 差异
const renderDifferenceVOStatistic = (text, row) => {
  const { valueEdition } = row;
  const { diff, per } = text;
  let value;
  let value1;
  let precision;
  let prefix;
  let color;
  if (valueEdition.indexOf('金额') > -1) {
    value = `${diff / 10000} `;
    precision = 0;
  } else if (valueEdition.indexOf('房源均价') > -1) {
    value = `${diff}`;
    precision = 0;
  } else if (valueEdition.indexOf('车位均价') > -1) {
    value = `${diff}`;
    precision = 0;
  } else if (valueEdition.indexOf('面积') > -1) {
    value = `${diff}`;
    precision = 2;
  } else if (valueEdition.indexOf('套数') > -1) {
    value = `${diff}`;
    precision = 0;
  } else if (valueEdition.indexOf('车位数') > -1) {
    value = `${diff}`;
    precision = 0;
  }

  if (diff > 0) {
    color = '#F5212D';
    value1 = per * 1;
    prefix = <Icon type="arrow-up" />;
  } else if (diff < 0) {
    value1 = per * -1;
    color = '#52C41A';
    prefix = <Icon type="arrow-down" />;
  } else {
    color = 'rgba(0, 0, 0, 0.65)';
    prefix = '';
  }
  return (
    <Flex justify="around" align="center" wrap="nowrap">
      <div style={{ width: '100%', textAlign: 'right' }}>
        <Statistic
          value={value > 0 ? (value * 1).toFixed(precision) : (value * -1).toFixed(precision)}
          precision={precision}
          valueStyle={{ color }}
        />
        {per * 1 === 0 ? (
          <Statistic formatter={() => '-'} valueStyle={{ color }} />
        ) : (
          <Statistic
            value={(value1 * 100).toFixed(2)}
            prefix={prefix}
            suffix="%"
            valueStyle={{ color }}
          />
        )}
      </div>
    </Flex>
  );
};

const ValueOlive = props => {
  const { tabKey, items } = props;
  const { tableDate1 } = items;
  const [versionName, setVersionName] = useState('');
  const [tableDataA, setTableDataA] = useState([]);
  // const [columns, setColumns] = useState([]);

  useEffect(() => {
    const cloneData = _.cloneDeep(tableDate1);
    if (_.isEmpty(cloneData)) {
      setTableDataA([]);
    } else {
      const filetData = _.filter(cloneData, x => x.type === tabKey);
      setVersionName(filetData[0].versionName);
      const newData = utils.modifyDifferenceVOData(filetData);
      const dataSource = utils.buildValueOliveColumns(newData);
      setTableDataA(dataSource);
    }
  }, [tabKey]);

  const columns = [
    {
      dataIndex: 'valueEdition',
      title: '货值/版本',
      align: 'center',
      width: '25%',
      render: text => <div style={{ width: '100%', textAlign: 'right' }}>{text}</div>,
    },
    {
      dataIndex: 'differenceVO',
      title: '差异',
      align: 'center',
      width: '25%',
      render: (text, row) => renderDifferenceVOStatistic(text, row),
    },
    {
      dataIndex: 'afterContentVO',
      title: '调整后',
      align: 'center',
      width: '25%',
      render: (text, row) => renderStatistic(text, row),
    },
    {
      dataIndex: 'contentVO',
      title: versionName,
      align: 'center',
      width: '25%',
      render: (text, row) => renderStatistic(text, row),
    },
  ];

  return (
    <Table
      scroll={{ y: 250 }}
      rowKey="valueEdition"
      columns={columns}
      dataSource={tableDataA}
      bordered
      size="middle"
      pagination={false}
    />
  );
};
export default ValueOlive;
